<script setup lang="ts">
import { ref } from 'vue';
import { puthistoryProfileAPI } from '@/services/history';
//假设的数据
const trade = ref(100)
const grade = ref(2)
const onAvatarChange = () => {
  // 调用微信拍照api
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      // 本地路径
      const { tempFilePath } = res.tempFiles[0];
      // 文件上传
      uni.uploadFile({
        url: 'http://8.138.97.80:5000/upload/image',
        name: 'file',
        filePath: tempFilePath,
        formData: {},
        success: (uploadRes) => {
          const responseStr = uploadRes.data;
          // 解析 JSON 字符串
          const imageDataObj = JSON.parse(responseStr);

          // 提取 imageData 的值
          const imageDataBase64 = imageDataObj.imageData;

          // 拼接 data:image/png;base64, 前缀和 base64 数据
          const newSrc = "data:image/png;base64," + imageDataBase64;
          src.value = newSrc
          //上传数据到服务器
          puthistoryProfileAPI(newSrc)



          uni.showToast({ icon: "success", title: '上传成功！' });
        },
        fail: (uploadError) => {

          uni.showToast({ icon: "none", title: '上传失败：' + uploadError.errMsg });
        }
      });
    },
    fail: (chooseError) => {
      uni.showToast({ icon: "none", title: '选择媒体失败：' + chooseError.errMsg });
    }
  });
}
const recommendCardList = [
  {
    pic: '../../static/images/vip_pic1.png',
    text: '50米正确起跑 | 体测提高 ',
    sp: '爱跑步的人 66 人订阅',
  },
  {
    pic: '../../static/images/vip_pic2.png',
    text: '短跑脚掌落地技巧 ',
    sp: 'lablan跑不快     781 人订阅',
  },
]
const src = ref("https://i.postimg.cc/RZ88dxp7/image-png-1.png")

//历史记录页面
const onHistory = () => {
  uni.navigateTo({
    url: '/pages/Runhistory/Runhistory'
  });
}
</script>

<template>
  <view class="flex-col page">
    <image class="image" :src=src />
    <view class="flex-col group">
      <view class="flex-row justify-evenly items-center self-center section" @tap="onAvatarChange">
        <text class="text">上传跑步</text>
        <image class="image_2"
          src="https://ide.code.fun/api/image?token=65fc1c32731c75001101541f&name=b5bd480c5452e0e3149ccb0b2acb85d1.png" />
      </view>
      <view class="flex-row items-center self-stretch section_2 mt-29">
        <view class="flex-col flex-1">
          <view class="flex-row">
            <text class="font text_2">您有一份</text>
            <text class="font_2 text_3">跑步姿势</text>
            <text class="font text_4">统计报告</text>
          </view>
          <view class="flex-row justify-evenly mt-15">
            <text class="font_2 text_5">标准度</text>
            <text class="font_2 text_6">柔韧性</text>
            <text class="font_2 text_7">速度</text>
            <text class="font_2">耐力</text>
            <text class="font_2">力量</text>
          </view>
        </view>
        <view class="flex-col justify-start items-end shrink-0 relative group_2 ml-5">
          <view class="flex-col justify-start items-start relative section_3">
            <view class="flex-col justify-start items-start relative group_3">
              <view class="section_4"></view>

            </view>

            <view class="section_6 pos_5"></view>
          </view>
          <view class="flex-row items-center section_5 pos_4">
            <text class="font_3 text_8">GO</text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-row justify-between items-center group_5">
      <text class="text_9">跑步数据</text>
      <view class="flex-col justify-start items-center text-wrapper" @tap="onHistory">
        <text class="font_2 text_10">历史成绩</text>
      </view>
    </view>
    <view class="flex-row equal-division">
      <view class="flex-col equal-division-item section_7">
        <view class="flex-row items-center">
          <image class="image_9" src="https://i.postimg.cc/SRMXpCDV/1f2b03d19cfbceb3162a0ae2a65b4a2e.png" />
          <text class="font text_11 ml-9">本周成绩</text>
        </view>
        <view class="flex-row items-center group_7">
          <text class="font_4">{{ trade }}</text>
          <text class="font_3 text_13 ml-1">分</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_2 pos_8">
          <text class="font_3 text_16">良好</text>
        </view>
      </view>
      <view class="flex-row justify-center items-start equal-division-item_2 section_8 ml-27">
        <image class="image_9" src="https://i.postimg.cc/nz7pkJ2S/b2cc33fbafdee3ea22336ec1f09176a7.png" />
        <view class="flex-col button group_6 ml-9">
          <text class="self-start font text_12">好友排名</text>
          <view class="flex-row items-center self-stretch group_8 mt-21">
            <text class="font_4 text_14">{{ grade }}</text>
            <text class="ml-2 font_3 text_15">名</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 智能视频推荐 -->
    <text
      style="line-height: 40px;text-align: center;font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, 1)">智能视频推荐</text>
    <view class="recommend">
      <view class="recommendCard" v-for="recommendCard in recommendCardList" :key="recommendCard">
        <image style="width: 103px; height: 100%; border-radius: 5px" :src="recommendCard.pic"></image>
        <view style="
                  display: flex;
                  height: 80%;
                  flex-direction: column;
                  justify-content: space-between;
                  flex: 1;
                  margin-left: 16px;
                ">
          <text style="font-size: 16px;color: black;flex: 1;">{{ recommendCard.text }}</text>
          <image src="../../static/images/vip_ic2.png" style="width: 13px;height: 10px;margin-bottom: 4px;"></image>
          <text style="font-size: 14px;color: rgba(56, 56, 56, 1);">{{ recommendCard.sp }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.recommendCard {
  height: 90px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 10px;
}

.mt-29 {
  margin-top: 50.58rpx;
}

.mt-15 {
  margin-top: 26.16rpx;
}

.ml-5 {
  margin-left: 8.72rpx;
}

.ml-27 {
  margin-left: 47.09rpx;
}

.ml-9 {
  margin-left: 15.7rpx;
}

.mt-21 {
  margin-top: 36.63rpx;
}

.ml-1 {
  margin-left: 1.74rpx;
}

.page {
  padding: 48.84rpx 36.63rpx 33.14rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .image {
    margin-right: 5.23rpx;
    width: 671.51rpx;
    height: 443.02rpx;
  }

  .group {
    margin-top: 57.56rpx;
    padding: 0 34.88rpx;

    .section {
      padding: 28.78rpx 40.12rpx 28.78rpx 55.59rpx;
      background-image: linear-gradient(112deg, #fbe363 4.2%, #febf37 99.5%);
      border-radius: 69.77rpx;
      filter: drop-shadow(0rpx 0rpx 13.95rpx #fec7402e);
      overflow: hidden;
      width: 254.65rpx;

      .text {
        color: #ffffff;
        font-size: 29.65rpx;
        font-family: SourceHanSansCN;
        line-height: 27.28rpx;
      }

      .image_2 {
        width: 34.88rpx;
        height: 34.88rpx;
      }
    }

    .section_2 {
      margin-right: 5.23rpx;
      padding-left: 42.45rpx;
      background-color: #ffffff;
      border-radius: 17.44rpx;
      filter: drop-shadow(0rpx 0rpx 13.95rpx #84b3f514);
      overflow: hidden;

      .text_2 {
        font-size: 22.67rpx;
        line-height: 20.95rpx;
      }

      .text_3 {
        margin-left: 19.19rpx;
        color: transparent;
        font-size: 22.67rpx;
        line-height: 20.88rpx;
        background-image: linear-gradient(90deg, #4fb0fe 0%, #2b9bf6 100%);
        -webkit-background-clip: text;
      }

      .text_4 {
        margin-left: 5.18rpx;
        font-size: 22.67rpx;
        line-height: 21.16rpx;
      }

      .text_5 {
        line-height: 22.59rpx;
      }

      .text_6 {
        line-height: 22.57rpx;
      }

      .text_7 {
        line-height: 22.59rpx;
      }

      .group_2 {
        width: 235.45rpx;

        .section_3 {
          padding: 20.7rpx 0 12.42rpx;
          background-image: url('https://ide.code.fun/api/image?token=65fc1c32731c75001101541f&name=d1e9f1c0990dfe0bafba2585ec121637.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 214.53rpx;

          .group_3 {
            margin-left: 51.02rpx;
            padding: 6.84rpx 0 98.3rpx;
            opacity: 0.8;
            width: 173.2rpx;

            .section_4 {
              margin-left: 21.16rpx;
              background-image: linear-gradient(90deg, #d9f7be 0%, #b7eb8f 100%);
              border-radius: 19.08rpx 68.16rpx 68.16rpx 0rpx;
              width: 56.28rpx;
              height: 22.2rpx;
            }

            .group_4 {
              padding: 6.84rpx 0 22.26rpx;
              width: 163.95rpx;

              .image_4 {
                filter: drop-shadow(-9.02rpx 9.02rpx 9.02rpx #96d26d33);
                width: 71.51rpx;
                height: 97.67rpx;
              }

              .image_6 {
                width: 47.09rpx;
                height: 31.4rpx;
              }

              .pos_6 {
                position: absolute;
                right: 53.27rpx;
                bottom: 20.93rpx;
              }

              .image_7 {
                filter: drop-shadow(-9.02rpx 9.02rpx 9.02rpx #95de6433);
                width: 59.3rpx;
                height: 52.33rpx;
              }

              .pos_7 {
                position: absolute;
                right: 17.48rpx;
                bottom: 0;
              }

              .image_3 {
                width: 163.95rpx;
                height: 120.35rpx;
              }

              .pos_2 {
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }

            .pos {
              position: absolute;
              left: 0;
              right: 9.24rpx;
              top: 0;
            }
          }

          .image-wrapper {
            padding: 101.15rpx 0 3.51rpx;
            background-color: #52baff;
            mix-blend-mode: COLOR;
            width: 99.42rpx;

            .image_8 {
              margin-left: 20.65rpx;
              filter: drop-shadow(0rpx 0rpx 5.81rpx #ffffff80);
              width: 13.95rpx;
              height: 13.95rpx;
            }
          }

          .pos_3 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          .section_6 {
            background-color: #52baff;
            mix-blend-mode: COLOR;
            width: 88.31rpx;
            height: 79.26rpx;
          }

          .pos_5 {
            position: absolute;
            right: 14.55rpx;
            top: 85.78rpx;
          }
        }

        .section_5 {
          padding: 3.49rpx 5.23rpx 3.49rpx 13.27rpx;
          background-image: linear-gradient(90deg, #4fb0fe 0%, #2b9bf6 100%);
          border-radius: 17.44rpx;

          .text_8 {
            color: #ffffff;
            line-height: 15.89rpx;
          }

          .image_5 {
            width: 24.42rpx;
            height: 24.42rpx;
          }
        }

        .pos_4 {
          position: absolute;
          left: 0;
          top: 87.23rpx;
        }
      }
    }
  }

  .group_5 {
    margin-top: 94.19rpx;
    padding: 0 44.7rpx;

    .text_9 {
      color: #000000;
      font-size: 31.4rpx;
      font-family: SourceHanSansCN;
      line-height: 29.01rpx;
    }

    .text-wrapper {
      margin-right: 4.13rpx;
      padding: 16.33rpx 0 13.4rpx;
      background-color: #e6f7ff;
      border-radius: 27.91rpx;
      width: 153.49rpx;
      height: 52.33rpx;

      .text_10 {
        color: #4aaaf8;
        line-height: 22.6rpx;
      }
    }
  }

  .font_2 {
    font-size: 24.42rpx;
    font-family: SourceHanSansCN;
    line-height: 22.52rpx;
    color: #98a1af;
  }

  .equal-division {
    margin: 55.81rpx 42.73rpx 0 24.42rpx;

    .equal-division-item {
      position: relative;
      flex: 1 1 284.3rpx;

      .text_11 {
        line-height: 22.6rpx;
      }

      .group_7 {
        margin-top: 20.9rpx;
        padding: 0 12.38rpx;

        .text_13 {
          line-height: 18.94rpx;
        }
      }

      .text-wrapper_2 {
        padding: 8.79rpx 0 6.56rpx;
        background-color: #eafee0;
        overflow: hidden;
        width: 62.79rpx;

        .text_16 {
          color: #52c41a;
          line-height: 19.53rpx;
        }
      }

      .pos_8 {
        position: absolute;
        right: 19.19rpx;
        top: 122.09rpx;
      }
    }

    .section_7 {
      padding: 27.91rpx 27.91rpx 39.85rpx 27.91rpx;
      background-color: #ffffff;
      border-radius: 17.44rpx;
      filter: drop-shadow(0rpx 0rpx 13.95rpx #84b3f514);
      height: 162.21rpx;
    }

    .equal-division-item_2 {
      flex: 1 1 284.3rpx;
      margin-top: 5.23rpx;

      .button {
        margin-top: 10.99rpx;

        .text_12 {
          line-height: 22.53rpx;
        }

        .group_8 {
          padding: 0 3.05rpx;

          .text_14 {
            line-height: 31.78rpx;
          }

          .text_15 {
            line-height: 19.29rpx;
          }
        }
      }

      .group_6 {
        width: 165.94rpx;
      }
    }

    .section_8 {
      padding: 27.91rpx 27.91rpx 27.63rpx;
      background-color: #ffffff;
      border-radius: 17.44rpx;
      filter: drop-shadow(0rpx 0rpx 13.95rpx #84b3f514);
      height: 156.98rpx;
    }

    .image_9 {
      border-radius: 20.93rpx;
      width: 41.86rpx;
      height: 41.86rpx;
    }

    .font_4 {
      font-size: 41.86rpx;
      font-family: SourceHanSansCN;
      line-height: 31.69rpx;
      color: #000000;
    }
  }

  .font {
    font-size: 24.42rpx;
    font-family: SourceHanSansCN;
    line-height: 22.52rpx;
    color: #000000;
  }

  .font_3 {
    font-size: 20.93rpx;
    font-family: SourceHanSansCN;
    color: #000000;
  }

  .section_9 {
    margin: 69.77rpx 33.14rpx 0 26.16rpx;
    background-color: #cccccc;
    height: 305.23rpx;
  }
}

/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.49rpx;
}

.mt-2 {
  margin-top: 3.49rpx;
}

.ml-4 {
  margin-left: 6.98rpx;
}

.mt-4 {
  margin-top: 6.98rpx;
}

.ml-6 {
  margin-left: 10.47rpx;
}

.mt-6 {
  margin-top: 10.47rpx;
}

.ml-8 {
  margin-left: 13.95rpx;
}

.mt-8 {
  margin-top: 13.95rpx;
}

.ml-10 {
  margin-left: 17.44rpx;
}

.mt-10 {
  margin-top: 17.44rpx;
}

.ml-12 {
  margin-left: 20.93rpx;
}

.mt-12 {
  margin-top: 20.93rpx;
}

.ml-14 {
  margin-left: 24.42rpx;
}

.mt-14 {
  margin-top: 24.42rpx;
}

.ml-16 {
  margin-left: 27.91rpx;
}

.mt-16 {
  margin-top: 27.91rpx;
}

.ml-18 {
  margin-left: 31.4rpx;
}

.mt-18 {
  margin-top: 31.4rpx;
}

.ml-20 {
  margin-left: 34.88rpx;
}

.mt-20 {
  margin-top: 34.88rpx;
}

.ml-22 {
  margin-left: 38.37rpx;
}

.mt-22 {
  margin-top: 38.37rpx;
}

.ml-24 {
  margin-left: 41.86rpx;
}

.mt-24 {
  margin-top: 41.86rpx;
}

.ml-26 {
  margin-left: 45.35rpx;
}

.mt-26 {
  margin-top: 45.35rpx;
}

.ml-28 {
  margin-left: 48.84rpx;
}

.mt-28 {
  margin-top: 48.84rpx;
}

.ml-30 {
  margin-left: 52.33rpx;
}

.mt-30 {
  margin-top: 52.33rpx;
}

.ml-32 {
  margin-left: 55.81rpx;
}

.mt-32 {
  margin-top: 55.81rpx;
}

.ml-34 {
  margin-left: 59.3rpx;
}

.mt-34 {
  margin-top: 59.3rpx;
}

.ml-36 {
  margin-left: 62.79rpx;
}

.mt-36 {
  margin-top: 62.79rpx;
}

.ml-38 {
  margin-left: 66.28rpx;
}

.mt-38 {
  margin-top: 66.28rpx;
}

.ml-40 {
  margin-left: 69.77rpx;
}

.mt-40 {
  margin-top: 69.77rpx;
}

.ml-42 {
  margin-left: 73.26rpx;
}

.mt-42 {
  margin-top: 73.26rpx;
}

.ml-44 {
  margin-left: 76.74rpx;
}

.mt-44 {
  margin-top: 76.74rpx;
}

.ml-46 {
  margin-left: 80.23rpx;
}

.mt-46 {
  margin-top: 80.23rpx;
}

.ml-48 {
  margin-left: 83.72rpx;
}

.mt-48 {
  margin-top: 83.72rpx;
}

.ml-50 {
  margin-left: 87.21rpx;
}

.mt-50 {
  margin-top: 87.21rpx;
}

.ml-52 {
  margin-left: 90.7rpx;
}

.mt-52 {
  margin-top: 90.7rpx;
}

.ml-54 {
  margin-left: 94.19rpx;
}

.mt-54 {
  margin-top: 94.19rpx;
}

.ml-56 {
  margin-left: 97.67rpx;
}

.mt-56 {
  margin-top: 97.67rpx;
}

.ml-58 {
  margin-left: 101.16rpx;
}

.mt-58 {
  margin-top: 101.16rpx;
}

.ml-60 {
  margin-left: 104.65rpx;
}

.mt-60 {
  margin-top: 104.65rpx;
}

.ml-62 {
  margin-left: 108.14rpx;
}

.mt-62 {
  margin-top: 108.14rpx;
}

.ml-64 {
  margin-left: 111.63rpx;
}

.mt-64 {
  margin-top: 111.63rpx;
}

.ml-66 {
  margin-left: 115.12rpx;
}

.mt-66 {
  margin-top: 115.12rpx;
}

.ml-68 {
  margin-left: 118.6rpx;
}

.mt-68 {
  margin-top: 118.6rpx;
}

.ml-70 {
  margin-left: 122.09rpx;
}

.mt-70 {
  margin-top: 122.09rpx;
}

.ml-72 {
  margin-left: 125.58rpx;
}

.mt-72 {
  margin-top: 125.58rpx;
}

.ml-74 {
  margin-left: 129.07rpx;
}

.mt-74 {
  margin-top: 129.07rpx;
}

.ml-76 {
  margin-left: 132.56rpx;
}

.mt-76 {
  margin-top: 132.56rpx;
}

.ml-78 {
  margin-left: 136.05rpx;
}

.mt-78 {
  margin-top: 136.05rpx;
}

.ml-80 {
  margin-left: 139.53rpx;
}

.mt-80 {
  margin-top: 139.53rpx;
}

.ml-82 {
  margin-left: 143.02rpx;
}

.mt-82 {
  margin-top: 143.02rpx;
}

.ml-84 {
  margin-left: 146.51rpx;
}

.mt-84 {
  margin-top: 146.51rpx;
}

.ml-86 {
  margin-left: 150rpx;
}

.mt-86 {
  margin-top: 150rpx;
}

.ml-88 {
  margin-left: 153.49rpx;
}

.mt-88 {
  margin-top: 153.49rpx;
}

.ml-90 {
  margin-left: 156.98rpx;
}

.mt-90 {
  margin-top: 156.98rpx;
}

.ml-92 {
  margin-left: 160.47rpx;
}

.mt-92 {
  margin-top: 160.47rpx;
}

.ml-94 {
  margin-left: 163.95rpx;
}

.mt-94 {
  margin-top: 163.95rpx;
}

.ml-96 {
  margin-left: 167.44rpx;
}

.mt-96 {
  margin-top: 167.44rpx;
}

.ml-98 {
  margin-left: 170.93rpx;
}

.mt-98 {
  margin-top: 170.93rpx;
}

.ml-100 {
  margin-left: 174.42rpx;
}

.mt-100 {
  margin-top: 174.42rpx;
}
</style>
